
<template>
  <div class="modal-box">
    <a-row :gutter="10">
      <a-col :md="24" :sm="24">
        <div class="table-ref">
          <!-- <div class="title">
            <span>月份评分详情</span>
            <span>（{{ date.slice(0, 4) + '年' + date.slice(4, 6) + '月' }}）</span>
          </div> -->

          <a-table
            :loading="loadingRef"
            bordered
            :scroll="tableScoreModel.scroll"
            :columns="tableScoreModel.columns"
            :dataSource="tableScoreModel.dataSource"
            :pagination="false"
          >
            <template v-for="item in monthArr" :slot="item" slot-scope="text, record, index">
              <div :class="setClassName(item)">{{ text }}</div>
            </template>
            <!-- 调整记录 -->
            <template :slot="'hishost'" slot-scope="text, record, ind">
              <div class="comments-box" v-if="modeltype">
                <span>{{text}}</span>
              </div>
            </template>
            <!-- 评价 -->
            <template :slot="'scoreComments'" slot-scope="text, record, ind">
              <div class="comments-box" v-for="(item, index) in text" :key="index">
                <span v-if="text.length >= 1">{{index+1}}.{{item}};</span>
                <!-- <span v-if="text.length > 1">{{index+1}}.{{item.title}}：</span>
                <span :title="item.title">{{item.content}}</span>-->
              </div>
            </template>
          </a-table>
        </div>
      </a-col>
      <!-- 右边 细项列表 end -->
    </a-row>
  </div>
</template>
<script>
/* 引入 api 接口配置 */
import { apiConfig } from './api.config.js'

/* 引入表格配置文件 */
import { tableScoreModel, monthArr } from './table.config.js'

// import TestData from './1' //引入模拟josn文件

export default {
  props: {
    /**
     * gm => 总经理评分
     * kpi => 绩效汇总评分
     * */
    k: '',
    //p为评分及意见t为调整记录
    param:'',

    /* 参考年 & 月 */
    date: String,

    /* 部门信息 */
    departInfo: {
      type: Object,
      default: null
    }
  },

  data() {
    let _this=this;
    let _tableScoreModel=tableScoreModel(_this.k,_this.param);
    return {
      /* 查询信息 */
      queryParam: {
        indexYearMonth: this.date
      },

      tableScoreModel: _tableScoreModel, // 表格数据
      monthArr: monthArr(),
      loadingRef: false, // 数据是否在加载中

      modeltype: false, // 介入来源
      old:[]
    }
  },
  created(){
   // this.old=this.tableScoreModel.columns
  },
  methods: {
    /* 动态给 class 高亮 */
    setClassName(key) {
      let currentMonthKey = 'm' + this.date.slice(4, 6)
      return currentMonthKey === key ? 'high_light' : ''
    },
    /* 初始化数据 */
    initData(n, type, par) {
      /*  if(type){
         // if(this.param==='t')
              let responseData = [
                              {
                              title: '调整记录',
                              align: 'center',
                              width: 300,
                              dataIndex: 'changeReport',
                              scopedSlots: { customRender: 'hishost' }
                              }
                        ]
                        let newData = [...responseData]
                        this.tableScoreModel.columns = this.old.concat(newData)
        }*/

      this.getCgDatagrid(n, type, par)
    },

    /* 获取部门评分参考细项 弹窗右边 par=请求入参*/
    getCgDatagrid(n, type, par) {
      let t = this
      t.modeltype = type

      // let departInfo = t.departInfo
      // let param = {
      //   indexValueCode: departInfo.indexValueCode, // 评分指标 code
      //   indexDepart: departInfo.indexDepart, // 被评分部门
      //   indexScorer: departInfo.indexScorer, // 被评分部人
      //   ...t.queryParam
      // }

      t.tableScoreModel.dataSource = []
      t.loadingRef = true
      apiConfig['gm']
        .getCommentsReport(par)
        .then(res => {
          t.loadingRef = false
          let resData = res.result

          if (!resData || (resData && resData.data && resData.data.length === 0)) {
            t.tableScoreModel.dataSource = []
            return
          }

          t.tableScoreModel.dataSource = resData.data // 更新列表
        })
        .catch(error => {
          t.loadingRef = false
          t.$message.error(error.message)
        })
      // 模拟数据
      // t.tableScoreModel.dataSource = TestData.result.data // 更新列表
    }
  }
}
</script>



<style lang="less" scoped>
.modal-box {
  width: 100%;

  .table-ref {
    /deep/.ant-table-tbody > tr,
    /deep/.ant-table-tbody > tr > td {
      height: 38px;
    }

    /deep/.ant-table th,
    /deep/.ant-table td {
      white-space: nowrap;
    }
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    margin-left: 4px;
  }

  .high_light {
    color: #ff6600;
    font-weight: bold;
  }
  .comments-box {
    // text-align: left;
  }
}
</style>
